Lesson 5

Tables

<TABLE>
<TR>
<TD></TD>

</TR>
</TABLE>

How do you do some cool things with tables?

Glad you asked!

Honk	if you're......

The cool code for this:
<TD BGCOLOR="#ff00ff ">Honk</TD>
<TD BGCOLOR="#0000ff">if you're........</TD>

This can only be seen in the newer browsers. Pretty cool trick so you can "highlight" some of your work.

Honk

you

like.......

Pretty cool huh? Assuming you see a picture in the table, here's the code:
<TABLE BORDER=3 WIDTH="75" BACKGROUND="potty.gif">

You can use any graphic for this.

If you don't see a picture in the table, you need to get Internet Explorer 4.0. I tried to look at this with Netscape Navigator Gold 3, there's a table but no picture.

The purpose for showing you this last one is so you can see the benefits of dicing up pictures.

If you pass your mouse over the image, you'll notice that there are several links "under" the picture.

How'd we do that?
First I sliced up the picture. (Use a graphics program) I saved each section as it's own picture. meta000, meta001, meta002, meta003. I wrote down the images WIDTH and HEIGHT so the browser wouldn't have to guess these numbers, and then built the table.

If you looked at The Basics tutorial about links, you'll know I simply put a link to each image.

There's two rows and two columns to this table.

Here's the code:

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD><A HREF="http://www.cnn.com"><IMG SRC="meta000.jpg" BORDER=0 WIDTH="149" HEIGHT="90" ALT="CNN"></A></TD>

<TD><A HREF="http://www.arachnoid.com"><IMG SRC="meta001.jpg" BORDER=0 WIDTH="171" HEIGHT="90" ALT="Arachnophilia"></A></TD>

</TR>

<TR>

<TD><A HREF="http://www.microsoft.com"><IMG SRC="meta002.jpg" BORDER=0 WIDTH="149" HEIGHT="110" ALT="Microsoft"></A></TD>

<TD><A HREF="http://www.gvn.net/%7Ejunicorn/gallery.html"><IMG SRC="meta003.jpg" BORDER=0 WIDTH="171" HEIGHT="110" ALT="Where I got this cool picture"></A></TD>

</TR>
</TABLE>

Now then, ever heard of image maps? That's the cheap way of doing it.
If you don't want to work real hard on slicing up a graphic with a graphics program, you can download a graphic slicer called Shoestrings Picture Dicer here it's only 437kb. It will dice up the picture and then give you the HTML code for the table. You supply the links.

A real image map maker with the coordinates and everything can be found here it's only 352kb. It's called MapMaker 32. You slice up your graphic and it'll write the HTML code for you with all the coordinates.